<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="renderer" content="webkit">
	<title>看看网</title>
	<link rel="shortcut icon" href="img/favicon.ico" />
	<link rel="stylesheet" href="css/bootstrap.min.css">

	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/set2.css" />
	<link rel="stylesheet" type="text/css" href="css/set1.css" />
	<link rel="stylesheet" type="text/css" href="css/set3.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/lrtk.css">
	<link rel="stylesheet" href="css/shake_effect.css">

	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
	<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
	<script src="js/bigpicture.js"></script>
	<script src="js/check_login.js"></script>
	
	<style type="text/css">
		body{
			font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"\5B8B\4F53",simsun,sans-serif;
		}
		.navbar-brand{
			margin:0;
			padding:0 ;
		}
		.carousel-inner img{
			margin:0 auto;
		}
		/*.carousel-control{
			font-size: 100px;
		}*/
		.tab1{
			margin-top:40px;
			color: #666;
		}
		.tab1-img{
			position: relative;
		}
		.tab1-p{
			position: absolute;
			right: 10%;
			top:91%;
			font-size: 16px;
			color: #A8A8A8;
		}
		.tab11-p{
			color:#FF8C1A;
		}
		.tab-h2{
			font-size: 30px;
			text-align: center;
			letter-spacing: 1px;
			color: #0059b2;
		}
		.tab-p{
			font-size: 18px;
			text-align: center;
			color: #999;
			letter-spacing: 1px;
		}
		.tab1-img{
			padding:3px;
			margin-bottom: 70px;
		}
		.tab2{
			margin-top: 40px;
		}
		.tab2-img{
			margin:2px auto;
			padding-bottom:10px;
			padding-left:8px;
		}
		.tab4{
			margin-top:10px;
		}
		.tab4-img{
			padding-top: 20px;
			padding-bottom: 50px;
		}
		.tab4-img h5{
			font-size: 15px;
		}
		/* 小屏幕（平板，大于等于768px） */
@media (min-width: 768px) {
	.tab-h2 {
		font-size: 26px;
	}
	.tab-p {
		font-size: 16px;
	}
	.text h3 {
		font-size: 22px;
	}
	.text p {
		font-size: 15px;
	}
	.lunbo{
		font-size:30px;
	}
	
}

/* 中等屏幕（桌面显示器，大于等于992px） */
@media (min-width: 992px) {
	.tab-h2 {
		font-size: 28px;
	}
	.tab-p {
		font-size: 17px;
	}
	.text h3 {
		font-size: 24px;
	}
	.text p {
		font-size: 16px;
	}
	.lunbo{
		font-size:30px;
	}
}

/* 大屏幕（大桌面显示器，大于等于1200px） */
@media (min-width: 1200px) {
	.tab-h2 {
		font-size: 30px;
	}
	.tab-p {
		font-size: 18px;
	}
	.text h3 {
		font-size: 26px;
	}
	.text p {
		font-size: 18px;
	}
	.lunbo{
		font-size:45px;
	}
}

		#footer{
			padding:20px;
			text-align: center;
			background-color: #222430;
			margin-top: 20px;
			border-top:1px solid #ccc;
		}
		#more{
			width:80%;
			height: 80%;
			margin:2px 2px;
		}
	</style>
	
</head>
<body>
<!-- 导航 -->
<!-- navbar-fixed-top -->
<nav class="nav navbar-default  navbar-fixed-top ">
	<div class="container" >
		<div class="navbar-header">
			<a href="#" class="navbar-brand" style="margin:0; padding:0"><img src="img/logo.png" alt=""></a>
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="collapse navbar-collapse" id="navbar-collapse">
			<ul class="nav navbar-nav navbar-right" style="margin-top:0;">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-globe"></span> 景点</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-eye-open"></span> 世界</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
				<c:if test="${user !=null}">
				   <li><a href="logout.do?page=index"><span class="glyphicon glyphicon-remove-circle"></span> 退出</a></li>
				   <li><a href="#"><img src="img/touxiang.jpg" width="30px" height="30px" class="img-circle"/> &nbsp;${user.username}</a></li>			
				</c:if>
				
				<c:if test="${user.username ==null}">			
				   <li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-user"></span> 登录</a></li>
				   <li><a href="register.html?page=index"><span class="glyphicon glyphicon-cloud"></span> 注册</a></li>
				</c:if>
				
			</ul>
		</div>
	</div>
</nav>

<!-- 模态框插件 -->
<div class="modal fade" id="myModal" data-backdrop="static">
	<div class="modal-dialog modal-sm">
		<div class="modal-content" id="login_form" style="width:520px;height:420px;margin:0 auto;">
			<div class="modal-header" style="border:none;">
			    <!-- 关闭 -->
				<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
				<img src="img/register.png" alt="">
				<p class="tab-p" style="font-size:14px;">——使用手机号/邮箱登录——</p>
			</div>
			<div class="modal-body" style="margin-top:-25px;">
				<form class="form-horizontal">
				<!-- <form class="form-horizontal"> -->
					<div class="form-group">
						<div class="col-md-8 col-md-offset-2">
							<input type="text" name="username" class="form-control" id="username" placeholder="输入手机号或者邮箱" required>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-8 col-md-offset-2">
							<input type="password" name="password" id="password" class="form-control" placeholder="密码" required>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-8 col-md-offset-2">
							<!-- 
							 <button type="button" class="btn btn-primary" style="width:315px;height:30px;">登录</button>
							-->
							<button type="button" class="btn btn-primary" id="login" style="width:315px;height:30px;">登录</button>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer" style="border:none;">
				<p class="tab-p" style="font-size:14px;margin-top:-30px;">——使用第三方账号登录——</p>
				<!-- <p class="tab-p" style="font-size:14px;margin-top:-15px;">还没有看看账号？<a href="">点击注册</a></p> -->
				<div class="form-group">
					<div class="col-md-8 col-md-offset-2">
						<div class="col-md-3" class="third pic_weibo">
							<a href=""><img src="img/weibo2.png" onmouseover="this.src=img/weibo1.png" alt="" /></a>
						</div>
						<div class="col-md-3">
							<a href=""><img src="img/qq2.png" alt=""></a>
						</div>
						<div class="col-md-3">
							<a href=""><img src="img/weixin2.png" alt=""></a>
						</div>
						<div class="col-md-3">
							<a href=""><img src="img/douban2.png" alt=""></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 轮播图 -->
<!-- 特效轮播图 -->
<div class="example-animation">
	<div data-lazy-background="img/pic4.jpg">
		<h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move">
			你
		</h3>
		<div class="lunbo" data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
			做好准备
		</div>
		<div class="lunbo" data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
			迎接灵魂出窍之旅
		</div>
		<!-- <div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
			<img data-lazy-src="img/add.jpg"/>
		</div> -->
	</div>
	<div data-lazy-background="img/pic2.jpg">
		<h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
			Fadein
		</h3>
		<div  class="lunbo" data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
			邂逅北极光
		</div>
		<div  class="lunbo" data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
			纪念一生一次的极致旅行
		</div>
		
	</div>	 
	<div data-lazy-background="img/pic1.jpg">
		<h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
			Fadein
		</h3>
		<div  class="lunbo" data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
			关于旅行
		</div>
		<div  class="lunbo" data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
			如此而已
		</div>
	</div>
	<div data-lazy-background="img/pic0.jpg">
		<h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
			Fadein
		</h3>
		<div  class="lunbo" data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
			紧提心脏
		</div>
		<div  class="lunbo" data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
			跟我们去狂欢
		</div>
	</div>	 	 
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('.example-animation').DrSlider(); 
});
</script>

<!-- 首页内容介绍 -->
<div class="tab1">
	<div class="container">
		<h2 class="tab-h2">世界那么大,我想去看看！</h2>
		<p class="tab-p">梦在远方，寻于路上</p>
		<div class="row">
			<div class="col-md-3 col-sm-6 col-xs-12 tab1-img" >
				<a href="javascript:void(0);"><img src="img/pic7.jpg" alt="" class="img-responsive img-rounded" ></a>
				<div class="caption">
					<h4 class="text-primary">拾取古老记忆的一方美意</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 北京 紫禁城</p>
					<p class="tab1-p"><span class="tab11-p">￥ 3600/人</span>起</p>
				</div>
			</div>
            <div class="col-md-3 col-sm-6  col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic11.jpg" alt="" class="img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">去洱海邂逅生命中的另一半</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 云南 大理洱海</p>
					<p class="tab1-p"><span class="tab11-p">￥ 6500/人</span>起</p>
				</div>
			</div>
			<div class="col-md-3  col-sm-6 col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic8.jpg" alt="" class="img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">和我一起追逐最恣意的青春</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 四川 稻城亚丁</p>
					<p class="tab1-p"><span class="tab11-p">￥ 3500/人</span>起</p>
				</div>
			</div>
			<div class="col-md-3  col-sm-6 col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic13.jpg" alt="" class=" img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">寻才子佳人文艺的栖息地</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 浙江 杭州西湖</p>
					<p class="tab1-p"><span class="tab11-p">￥2000/人</span>起</p>
				</div>
			</div>
			<div class="col-md-3  col-sm-6 col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic5.jpg" alt="" class=" img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">沙漠中藏着前世灵魂</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 宁夏 沙坡头</p>
					<p class="tab1-p"><span class="tab11-p">￥ 3000/人</span>起</p>
				</div>
			</div>
			<div class="col-md-3  col-sm-6 col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic6.jpg" alt="" class=" img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">不到长城非好汉</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 河北 金山岭长城</p>
					<p class="tab1-p"><span class="tab11-p">￥ 1200/人</span>起</p>
				</div>
			</div>
			<div class="col-md-3  col-sm-6 col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic10.jpg" alt="" class=" img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">当惊险刺激艳遇金色的柔软</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 甘肃 敦煌</p>
					<p class="tab1-p"><span class="tab11-p">￥ 3500/人</span>起</p>

				</div>
			</div>
			
			<div class="col-md-3  col-sm-6 col-xs-12 tab1-img">
				<div>
					<a href="#"><img src="img/pic12.jpg" alt="" class=" img-responsive img-rounded"></a>
				</div>
				<div class="caption">
					<h4 class="text-primary">释放情怀  神灵之地</h4>
					<p><span class="glyphicon glyphicon-map-marker"></span> 西藏 布达拉宫</p>
					<p class="tab1-p"><span class="tab11-p">￥ 4500/人</span>起</p>

				</div>
			</div>
		</div>
	</div>
</div>

<div class="tab4">
	<div class="container">
		<h2 class="tab-h2">我带你领略四季的变换</h2>
		<p class="tab-p" style="font-size:15px;">春有百花秋有月，夏有凉风冬有雪</p>
		<div class="row">
			<div class="col-md-6 col-sm-6 col tab4-img">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/pic84.jpg" alt="" class="media-object img-circle "></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">江苏 扬州 <span class="tab11-p">￥ 4500/人</span></h4>
						<p class="text-primary">"故人西辞黄鹤楼,烟花三月下扬州"</p>
						<h5 class="text-success">推荐理由：<small>扬州的春光，神仙不换。千年的历史停留在这安逸而宁静的城市，诗仙的这首诗让扬州蛮声中外，就像给扬州在历史的天空中撒下了一把飘荡的传单。烟花三月，期待有缘的你下扬州，赴一场万花之约！<a href="list.jsp" class="text-primary">>>发现更多</a></small></h5>
						<h5 class="text-warning">推荐时间:<small>春季(4-5月)</small></h5>
						<h5 class="text-warning">推荐指数:<small><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></small></h5>
					</div>
				</div>
			</div>
			<div class="col-md-6  col-sm-6 col tab4-img">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/pic85.jpg" alt="" class="media-object img-circle"></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">承德 避暑山庄<span class="tab11-p">￥ 5200/人</span></h4>
						<p class="text-primary">"轩墀敞御园,草树静高原"</p>
						<h5 class="text-success">推荐理由：<small>避暑山庄以朴素淡雅的山村野趣为格调，取自然山水之本色，吸收江南塞北之风光，成为中国现存占地最大的古代帝王宫苑，也是夏季避暑旅游的好去处。据说这里夏季三伏的平均温度只在24.4摄氏度。<a href="list.jsp" class="text-primary">>>发现更多</a></small></h5>
						<h5 class="text-warning">推荐时间:<small>夏季(8、9、10月)</small></h5>
						<h5 class="text-warning">推荐指数:<small><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></small></h5>
					</div>
				</div>
			</div>
			<div class="col-md-6  col-sm-6 col tab4-img">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/pic86.jpg" alt="" class="media-object img-circle"></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">重庆 长江三峡<span class="tab11-p">￥ 3000/人</span></h4>
						<p class="text-primary">"朝辞白帝彩云间,千里江陵一日还"</p>
						<h5 class="text-success">推荐理由：<small>秋季，巫山的峡巅谷底，被红霞浸染。这红叶，红似胭脂，色彩艳丽，江、山、红叶三位一体，巫山将展现出高峡平湖与漫山红叶交相辉映的壮丽新景观，让人醉而不知其返。让你从上帝的视角感受三峡的壮美!<a href="list.jsp" class="text-primary">>>发现更多</a></small></h5>
						<h5 class="text-warning">推荐时间:<small>秋季(10、11、12月)</small></h5>
						<h5 class="text-warning">推荐指数:<small><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></small></h5>
					</div>
				</div>
			</div>
			<div class="col-md-6  col-sm-6 col tab4-img">
				<div class="media">
					<div class="media-left">
						<a href="#"><img src="img/pic87.jpg" alt="" class="media-object img-circle"></a>
					</div>
					<div class="media-body">
						<h4 class="media-heading">吉林 雾凇岛<span class="tab11-p">￥ 4300/人</span></h4>
						<p class="text-primary">"皑如山上雪，皎若云间月"</p>
						<h5 class="text-success">推荐理由：<small>吉林雾凇，是雾凇中厚度最大、密度最小和结构最疏松的雾凇品种——毛茸形晶状雾凇，观赏起来格外晶莹剔透。当雾凇出现的时候，漫漫江堤，披银戴玉，仿若柳树结银花，松柏绽银菊一般。<a href="list.jsp" class="text-primary">>>发现更多</a></small></h5>
						<h5 class="text-warning">推荐时间:<small>冬季(12、1、2月)</small></h5>
						<h5 class="text-warning">推荐指数:<small><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></small></h5>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="tab3" style="margin-top:30px;">
	<div class="container">
		<div class="row">
			<h2 class="tab-h2">在路上遇见最真实的自己</h2>
			<p class="tab-p">游记</p>	
			<div class="col-md-6">
				<div class="grid1">
					<figure class="effect-bubba">
						<img src="img/pic82.jpg" alt="img82" class="img-responsive img-rounded">
						<figcaption>
							<h2>Adorable <span>Baby</span></h2>
							<p>快来和我一起玩耍吧!</p>
						</figcaption>			
					</figure>			
				</div>
			</div>
			<div class="col-md-6">
				<div class="grid1">
					<figure class="effect-bubba">
						<img src="img/pic83.jpg" alt="img83" class="img-responsive img-rounded">
						<figcaption>
							<h2>The<span>Lady</span></h2>
							<p>和我一起探索长寿的秘密</p>
						</figcaption>			
					</figure>			
				</div>
			</div>
		</div>
	</div>
</div>

<div class="tab2">
	<div class="container">
		<h2 class="tab-h2">世界在眼中 精彩在路上</h2>
		<p class="tab-p">和 Ta 相遇</p>
		<ul id="nav" class="nav nav-tabs nav-justified">
			<li class="active"><a href="#xibei">西北</a></li>
			<li><a href="#xinan">西南</a></li>
			<li><a href="#dongbei">东北</a></li>
			<li><a href="#dongnan">东南</a></li>
		</ul>
		<div class="tab-content" style="padding:10px;">
			<div class="tab-pane fade in active" id="xibei">
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic14.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>茶卡盐湖</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic15.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>扎尕那</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic16.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>新疆天山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic17.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>银川西部</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic18.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>青海祁连</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic19.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>赛里木湖</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic20.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>甘肃张掖</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic21.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>日月神山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic63.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>敦煌玉门关</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic64.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>丹霞地貌</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic65.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>宁夏水洞沟</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic66.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>西夏王陵</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic67.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>宁夏中卫</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic68.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>青海祁连山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic69.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>坎布拉</h4>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="xinan">
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic22.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>四姑娘山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic23.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>四川贡嘎</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic24.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>若尔盖</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic25.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>四川峨眉</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic26.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>黄果树瀑布</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic27.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>云南云阳</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic28.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>梅里雪山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic29.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>丽江黑龙潭</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic30.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>玉龙雪山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic31.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>罗平油菜花</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic32.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>羊卓雍错</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic33.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>长江三峡</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic34.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>南山夜景</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href="single.jsp"><img src="img/pic70.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>龚滩古镇</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic71.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>茶山竹海</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic72.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>白帝城</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic73.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>人民大礼堂</h4>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="dongbei">
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic35.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>辽宁旅顺</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic36.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>吉林长白山</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic37.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>哈尔滨庄园</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic38.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>黑龙江柴河</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic39.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>秦皇岛燕塞湖</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic40.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>秦皇岛山海关</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic41.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>秦皇岛北戴河</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic42.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>盘锦红海滩</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic43.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>河北承德</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic44.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>长春净月潭</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic45.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>索菲亚大教堂</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic74.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>大连金石滩</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic75.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>西湖嘴</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic76.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>辽宁宽甸</h4>
						</div>
					</div>
					<div class="col-md-2 col-xs-6 tab2-img">
						<a href=""><img src="img/pic77.jpg" alt="" class="img-responsive img-rounded"></a>
						<div class="carousel-caption">
							<h4>鹿角沟</h4>
						</div>
					</div>
			</div>
			<div class="tab-pane fade" id="dongnan">
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic46.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>青岛老城</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic47.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>山东泰山</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic48.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>济南趵突泉</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic50.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>苏州虎丘</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic49.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>济南大明湖</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic51.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>无锡蠡园</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic52.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>南京夫子庙</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic53.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>苏州甪直</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic54.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>上海泰晤士</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic55.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>浙江南浔</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic56.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>福建霞浦日出</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic57.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>厦门万国建筑</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic58.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>龙岩永定土楼</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic59.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>深圳梅沙</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic60.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>惠州盐洲岛</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic61.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>虎门大桥</h4>
					</div>
				</div>
				<div class="col-md-2 col-xs-6 tab2-img">
					<a href=""><img src="img/pic62.jpg" alt="" class="img-responsive img-rounded"></a>
					<div class="carousel-caption">
						<h4>海南三亚</h4>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="tab5">
	<div class="container">
		<h2 class="tab-h2">拾光正好，正值青春年少</h2>
		<p class="tab-p">我想和你看看这个世界的美好</p>
		<div class="bodyCon07">
			<div class="teacher">
				<div class="teacherPic">
					<div class="content" id="01">
		<!--				<img src="images/teacher011.jpg" width="200" height="325" />-->
						<div class="txt">
							<h3>新疆</h3>
							<h4>草场丰腴、林木葱郁，有着“塞外江南”的美称</h4>
							<p>发团日期：7-10月<br>
							   参考价格：6180元<br>
							   旅行必备: 带好日常必备药物、多带矿泉水、用防晒品护肤、带凉帽和防紫外线阳伞</p>
						</div>
					</div>
					<div class="content" id="02">
						<div class="txt">
							<h3>云南</h3>
							<h4>东川红土地的炫彩、高原明珠——抚仙湖的柔美</h4>
							<p>发团日期：7-11月<br>
							   参考价格：4580元<br>
							   旅行必备: 短袖T恤、外套、防晒品、雨具</p>
						</div>
					</div>
					<div class="content" id="03">
						<div class="txt">
							<a href="#" ><h3>贵州</h3></a>
							<h4>西江千户苗寨 以美丽回答一切</h4>
							<p>发团日期：7-12月<br>
							   参考价格：2680元<br>
							   旅行必备: 早晚温差较大,早晚较凉,昼夜温差较大，带上一两件春秋装的薄外套</p>
						</div>
					</div>
					<div class="content" id="04">
						<div class="txt">
							<h3>色达</h3>
							<h4>地球上最后的一片净土，心灵净化之旅</h4>
							<p>发团日期：7-10月<br>
							   参考价格：5200元<br>
							   旅行必备: 昼夜温差较大，注意备好保暖衣物</p>
						</div>
					</div>
					<div class="content" id="05">
						<div class="txt">
							<h3>重庆</h3>
							<h4>偶然的相遇，永久的记忆</h4>
							<p>发团日期：9-11月<br>
							   参考价格：4300元<br>
							   旅行必备: 景区昼夜温差大，请带足保暖防寒衣物，并备常用药品
							</p>
						</div>
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
		</div>
	</div>
</div>

 <!--java开始-->
<script type="text/javascript">
	$(".content") .hover(function(){
			$(this) .children(".txt").stop() .animate({height:"360px"},200);
            $(this) .parent(".teacherPic") .css({"background":"url(img/"+($(this).attr('id'))+".jpg) no-repeat","-webkit-transition":"all 0.8s ease 0.2s","transition":"all 0.8s ease 0.2s"});
/*			$(this) .parent(".teacherPic") .css("background","url(images/"+($(this).attr('id'))+".jpg) no-repeat");*/
			$(this) .find(".txt h3").stop() .animate({paddingTop:"10"},350);
			$(this) .find(".txt p").stop() .show();
	},function(){
			$(this) .children(".txt").stop() .animate({height:"100px"},200);
			$(this) .find(".txt h3").stop().animate({paddingTop:"0px"},550);
			$(this) .find(".txt p").stop() .hide();
		})
</script>
<!--java结束-->


<!-- 底部 -->
<footer id="footer" class="text-muted" style="position:absolute;bottom:-6%;">
	<div class="container" style="border-bottom:1px solid #666">
		<div class="row">
			<div class="col-md-7">
				<div class="row">
					<div class="col-md-3 col-xs-6 col-sm-3"><p class="text-success" style="padding-bottom: 2px; ">关于我们</p></div>
					<div class="col-md-3 col-xs-6 col-sm-3"><p class="text-warning" style="padding-bottom: 2px;">商家服务</p></div>
					<div class="col-md-3 col-xs-6 col-sm-3"><p class="text-danger" style="padding-bottom: 2px;">合作伙伴</p></div>
					<div class="col-md-3 col-xs-6 col-sm-3"><p class="text-info" style="padding-bottom: 2px;">了解更多</p></div>
					<div class="col-md-3 col-xs-6 col-sm-3 "><a href="#" class="text-muted">看看介绍</a></div>
					<div class="col-md-3 col-xs-6 col-sm-3"><a href="#" class="text-muted">商家登录</a></div>
					<div class="col-md-3 col-xs-6 col-sm-3"><a href="#" class="text-muted">xx旅游局</a></div>
				</div>
			</div>
			<div class="col-md-3  col-md-offset-2">
				<p class="text-muted" style="padding-bottom: 10px; ">关注我们  
					<span class="glyphicon glyphicon-hand-down"></span>
				</p>
				<div class="row">
					<div class="col-md-3 col-xs-3 col-sm-3">
						<a href="#"><img src="img/facebook.png" alt="" class="img-circle" id="more"></a>
					</div>
					<div class="col-md-3 col-xs-3 col-sm-3">
						<a href="#"><img src="img/tumblr.png" alt="" class="img-circle" id="more"></a>
					</div>
					<div class="col-md-3 col-xs-3 col-sm-3">
        				<a href="#"><img src="img/twitter.png" alt="" class="img-circle" id="more"></a>
					</div>
					<div class="col-md-3 col-xs-3 col-sm-3">
						<a href="#"><img src="img/whatsapp.png" alt="" class="img-circle" id="more"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row"  style="margin-top:5px;">
			<div class="col-md-6">CopyRight@2015~2016 All Rights Reserved</div>
			<div class="col-md-6 col-md-pull-3">看看网 www.xx.com 版权所有</div>
		</div>
</footer>

<script type="text/javascript">
	$(function(){
		//自动播放
		$('#myCarousel').carousel({
			interval:4000,
		});

		//设置垂直居中
		// $('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
		// $(window).resize(function(){
		// 	var $height=$('.carousel-inner img').eq(0).height() ||
		// 				$('.carousel-inner img').eq(1).height() ||
		// 				$('.carousel-inner img').eq(2).height();
		// 	$('.carousel-control').css('line-height',$height+'px');
		// });
	});
</script>
<script type="text/javascript">
	$('#nav a').on('click',function(e){
		//阻止默认行为
		e.preventDefault();
		$(this).tab('show');
	});
</script>
<c:if test="${requestScope.flag !=null }">
	 <script type="text/javascript">
		$("#myModal").modal('show');
	</script>
</c:if>
<script type="text/javascript">
   $('#login').click(function(){
	   var username=$("#username").val();
	   var password=$("#password").val();
	   
	   
	   //alert(username);
	   //alert(password);
	   
	   var url="login.do";
	   var args={"username":username,"password":password,"time":new Date()};
	   $.post(url,args,function(data){
		   
		   if("error"==data){
			   $("#password").val("");
		   }
		  window.lacation.href="index.jsp"
		   
	   });
   });


</script>

</body>
</html>
